import { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Descriptions, Space, Button, Modal, Input, message } from 'antd'
import style from './style.module.less'
import IconSvg from '@/components/IconSvg'
import { auditPass, auditThrnDown } from '../../service/service'
import { isNullData } from '@/utils'

export default () => {
  const pushRouter = useNavigate()
  const location = useLocation()
  const routerValue: any = location.state

  // routerValue.originalRecordValue   是没有经过过滤的值
  // routerValue.recordValue   已经经过过滤

  // 一个展示状态的工具 md
  const unreviewed = (
    <div className={style.stayAudit}>
      <span style={{ color: '#F8B972' }}>审核状态：待审核</span>
    </div>
  )
  const pass = (
    <div className={style.passOk}>
      <span style={{ color: '#51BCA5' }}>审核状态：已通过</span>
    </div>
  )
  const turnDown = (
    <div className={style.rejected}>
      <span style={{ color: '#EB5F62' }}>审核状态：已驳回</span>
    </div>
  )

  // 控制拒绝弹框是否打开
  const [isModalOpen, setIsModalOpen] = useState(false)

  // console.log('🦢🦢', routerValue.recordValue.hospitalArea)

  const filterFont = () => {
    let tranitionFont = routerValue.recordValue.hospitalArea
    // 匹配市级管理员没有省id为null的结果
    tranitionFont = tranitionFont.replace(/null/g, '')
    // 然后把第一个 / 删除，重新进行拼接展示
    if (tranitionFont.charAt(0) === '/') {
      tranitionFont = tranitionFont.substring(1)
    }
    return tranitionFont
  }
  // 打开弹框
  const showNotOpenModal = () => {
    setIsModalOpen(true)
  }
  // 拒绝弹框
  const handleCancel = () => {
    setIsModalOpen(false)
  }

  // 拒绝原因内容
  const [thrnDownFont, setThrnDownFont] = useState('')
  // 获取拒绝原因
  const getThrnDown = (e: any) => {
    const { value } = e.target
    setThrnDownFont(value)
  }
  // 确定按钮事件
  const goBack = async () => {
    if (thrnDownFont === '') {
      message.error('请输入拒绝原因!')
      return
    }
    delete routerValue.originalRecordValue.hospitalAreaFilterFont
    routerValue.originalRecordValue.rollbackReason = thrnDownFont
    const res = await auditThrnDown(routerValue.originalRecordValue)
    if (isNullData(res)) {
      message.info('已拒绝申请')
      pushRouter('/user-admin-province/uset-apply-forAudit')
    }
    setIsModalOpen(false)
    setThrnDownFont('') // 操作按钮之后清空
  }
  // 取消按钮
  const clearModal = () => {
    setIsModalOpen(false)
    setThrnDownFont('') // 操作按钮之后清空
  }

  // 同意通过按钮事件
  const consent = async () => {
    delete routerValue.originalRecordValue.hospitalAreaFilterFont
    const res = await auditPass(routerValue.originalRecordValue)
    if (isNullData(res)) {
      message.success('已同意审核')
      pushRouter('/user-admin-province/uset-apply-forAudit')
    }
    console.log('🦢🦢', res)
  }

  // 这里判断一下它是什么状态
  const ifFontSize = () => {
    if (routerValue.recordValue.auditStatus === '1') {
      return unreviewed
    }
    if (routerValue.recordValue.auditStatus === '2') {
      return pass
    }
    if (routerValue.recordValue.auditStatus === '3') {
      return turnDown
    }
  }

  return (
    <div className={style.examineBox}>
      {/* 顶部数据 */}
      <div className={style.topTitle}>
        <div>
          <Space size={16}>
            <div>
              <span style={{ fontWeight: 600 }}>{routerValue.recordValue.hospitalName}</span>
            </div>
            <div>
              {/* <span style={{ fontSize: 12, color: '#8E8E8E' }}>{routerValue.recordValue.hospitalArea}</span> */}
              <span style={{ fontSize: 12, color: '#8E8E8E' }}>{filterFont()}</span>
            </div>
            <div>
              <span style={{ fontSize: 12, color: '#8E8E8E' }}>医院编码：{routerValue.recordValue.hospitalCode}</span>
            </div>
          </Space>
        </div>
        <div>
          {' '}
          <div className={style.fontBtn}>{ifFontSize()}</div>
        </div>
      </div>
      {/* 顶部数据 */}

      <div className={style.center}>
        <div className={style.buttonBox}>
          {/* 审核状态 */}

          {routerValue.recordValue.auditStatus === '1' && (
            <Space size={20}>
              <Button onClick={showNotOpenModal} style={{ width: 80, height: 32 }}>
                不同意
              </Button>
              <Button onClick={consent} style={{ width: 80, height: 32 }} type='primary'>
                同意
              </Button>
            </Space>
          )}
        </div>
        <div className={style.top}>医院申请信息</div>
        <div className={style.bottom}>
          <div className={style.bottomCenter}>
            <Descriptions column={1} bordered={false} className={style.description}>
              <Descriptions.Item label='医院定级'>{routerValue.recordValue.hospitalLevel}</Descriptions.Item>
              <Descriptions.Item label='医院定等'>{routerValue.recordValue.hospitalRating}</Descriptions.Item>
              <Descriptions.Item label='医院类别'>{routerValue.recordValue.hospitalType}</Descriptions.Item>
              <Descriptions.Item label='是否教学医院'>{routerValue.recordValue.isTeachHospital}</Descriptions.Item>
              <Descriptions.Item label='医院性质'>{routerValue.recordValue.hospitalNature}</Descriptions.Item>
              <Descriptions.Item label='组织注册机构'>{routerValue.recordValue.uscl}</Descriptions.Item>
              <Descriptions.Item label='编制床位数'>{routerValue.recordValue.bedNum}</Descriptions.Item>
              <Descriptions.Item label='注册护士数'>{`${routerValue.recordValue.registeNurseNum}`}</Descriptions.Item>
              <Descriptions.Item label='护理部电话'>{routerValue.recordValue.telphone}</Descriptions.Item>
              <Descriptions.Item label='填报负责人'>{routerValue.recordValue.fillChargePeople}</Descriptions.Item>
              <Descriptions.Item label='负责人手机'>{routerValue.recordValue.chargePeoplePhone}</Descriptions.Item>
              <Descriptions.Item label='负责人邮箱'>{routerValue.recordValue.chargePeopleEmail}</Descriptions.Item>
              <Descriptions.Item label='医院所在地'>{filterFont()}</Descriptions.Item>
              <Descriptions.Item label='上传承诺书'>
                {/* 点击上传承诺书下载 */}
                <a download target='_blank' href={`${routerValue.originalRecordValue.promiseBookUrl}`} rel='noreferrer'>
                  {routerValue.originalRecordValue.promiseBookOriginalFileName}
                </a>
              </Descriptions.Item>
            </Descriptions>
          </div>
        </div>
        <div className={style.imageBox}>
          <IconSvg name='examineImage' style={{ width: '100%', height: '100%' }} />
        </div>
      </div>
      <Modal footer={null} title='拒绝原因' open={isModalOpen} onCancel={handleCancel}>
        <div className={style.modalBox}>
          <div className={style.top}>
            <div className={style.svgImageBox}>
              <IconSvg name='resuleSvg' style={{ width: '100%', height: '100%' }} />
            </div>
          </div>
          <div className={style.center}>
            <Input.TextArea value={thrnDownFont} onChange={getThrnDown} rows={6} placeholder='输入原因' />
          </div>
          <div className={style.bottom}>
            <div>
              <Button onClick={clearModal}>取消</Button>
            </div>
            <div style={{ marginLeft: 30 }}>
              <Button type='primary' onClick={goBack}>
                确定
              </Button>
            </div>
          </div>
        </div>
      </Modal>
    </div>
  )
}
